<template>
  <div class="menu-pop">
    <el-form
      label-position="left"
      label-width="80px"
      class="pdw20"
      :model="menuForm"
      :rules="rules"
      ref="menuForm"
    >
      <el-form-item label="父级菜单" prop="parent_id_list">
        <el-cascader
          style="width: 100%"
          v-model="menuForm.parent_id_list"
          :options="menuOptions"
          :props="{ checkStrictly: true }"
          @change="menuChange"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menu_name">
        <el-input
          v-model="menuForm.menu_name"
          placeholder="请输入菜单名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="路由路径" prop="path_url">
        <el-input
          v-model="menuForm.path_url"
          placeholder="请输入路由路径"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单排序" prop="menu_sort">
        <el-input v-model="menuForm.menu_sort" placeholder="1为最小"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标" prop="menu_icon">
        <el-input
          v-model="menuForm.menu_icon"
          placeholder="仅限顶级菜单有用"
        ></el-input>
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="submitMenu('menuForm')">
          确定
        </el-button>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { menuJson } from "../menuJson"
export default {
  data() {
    return {
      menuOptions: [],
      menuForm: {},
      rules: {
        menu_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        path_url: {
          required: true,
          message: "请输入活动名称",
          trigger: "blur",
        },
      },
    }
  },
  mounted() {
    // 重组树型实现联级选择器
    this.menuOptions = menuJson.concat()
    this.recursionMenu(this.menuOptions)
    let obj = {
      label: "顶层菜单",
      value: 0,
    }
    this.menuOptions.unshift(obj)
    this.menuOptions.map((item) => {
      if (item.menu_name === "首页") {
        item.disabled = true
      }
    })
    // 判断新增修改
    if (JSON.stringify(this.menuInfo) === "{}") {
      this.menuForm.parent_id_list = [0]
    } else {
      this.menuForm = this.menuInfo
    }
  },
  props: {
    menuInfo: {
      type: Object,
    },
  },
  methods: {
    // 为联级选择器加入需要的key
    recursionMenu(arr) {
      if (arr && arr.length > 0) {
        arr.map((item) => {
          item.value = item.menu_id
          item.label = item.menu_name
          if (item.children && item.children.length > 0) {
            this.recursionMenu(item.children)
          } else {
            return false
          }
        })
      }
    },
    // 选择后把父级数组赋给表单
    menuChange(val) {
      this.menuForm.parent_id_list = val
    },
    // 提交菜单
    submitMenu(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!")
        }
      })
    },
  },
}
</script>
<style scoped lang="scss"></style>
